<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>SQL运行器</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/layui/css/layui.css">
</head>
<body style="background-color: #FFFFFF;">

	<div class="layui-container layui-col-space20">
		<div class="layui-row">
			<div class="layui-col-md4  layui-col-md-offset4">
				<h1 class="site-h1">SQL运行器</h1>
			</div>
		</div>

		<div class="layui-row">
			<div class="layui-col-md6  layui-col-md-offset4">
				<input type="text" name="sql" required lay-verify="required"
					value="SELECT * FROM data WHERE 1=1" autocomplete="off"
					class="layui-input">
			</div>
			<div class="layui-col-md2">
				<button class="layui-btn" name="submit">立即执行</button>
			</div>
		</div>

		<div class="layui-row">
			<div class="layui-col-md4">
				<table id="log" lay-filter="log"></table>
			</div>
			<div class="layui-col-md8" id="data" lay-filter="data">
				<table id="data" lay-filter="data"></table>
			</div>
		</div>
	</div>
	<script src="/lib/jquery.min.js"></script>
	<script src="${pageContext.request.contextPath}/layui/layui.all.js"></script>
	<script src="${pageContext.request.contextPath}/js/admin/layUpload.js"></script>
	<script src="${pageContext.request.contextPath}/js/tools.js"></script>
	<script src="${pageContext.request.contextPath}/js/isLogin.js"></script>
	<script type="text/javascript">
		$("[name = 'submit']").click(function() {
			layer.load(1, {
				shade : [ 0.5, '#000' ]
			});
			gb.XHR({
				url : "/sqlrunner/getsql",
				queryParams : {
					sql : $("[name = 'sql']").val()
				},
				type : "POST",
				contentType : "application/x-www-form-urlencoded",
				isAsync : false,
				callback : function(data) {
					layer.closeAll();
					if (data.success == true) {
						console.log(JSON.parse(data.data));
						createTable(data.data);
						createTableLog();
					} else {
						layer.msg('SQL查询异常', {
							time : 1500
						});
					}
				}
			});
		});
		var table = layui.table;
		function createTable(table_data) {
			//第一个实例
			table.render({
				elem : '#data',
				height : 'full-200',
				cols : [ [ {
					field : 'content',
					width : '70%'
				} ] ],
				data : JSON.parse(table_data),
				limit : 15,
				page: true,
				limits: [15, 30],
				page : {
				layout : [ 'prev', 'page', 'next', 'count', 'limit' ]
				}
			    
			});

		}
		function createTableLog() {
			//第一个实例
			table.render({
				elem : '#log',
				height : 'full-200',
				limit : 5,
				url : '/log/list',
				cols : [ [ //表头
				{
					field : 'operation',
					title : '历史记录',
					width : '100%'
				} ] ]
			});
		}
	</script>
</body>
</html>